<template>
	<div class="home-main">
    <form class="listsort-wrap">
      <switch-area></switch-area>
      <div>
        <label>地址:</label><div style="display:inline-block" class="inpt">
          <Input placeholder="小区名" style="width: 126px;" size="small"/><Input placeholder="栋座" size="small"/><Input placeholder="单元" size="small"/><Input placeholder="楼" size="small"/><Input placeholder="房号" size="small"/>
        </div>
      </div>
      <div>
        <label>业主:</label><div style="display:inline-block" class="inpt">
        <Input placeholder="业主姓名" style="width: 126px;" size="small"/><Input placeholder="业主电话" style="width: 126px;" size="small"/>
      </div>
      </div>
      <div v-if="moreSelect">
        <label>编号:</label><div style="display:inline-block" class="inpt">
          <Input placeholder="需求编号" style="width: 126px;" size="small"/>
        </div>
        <label>登记时间:</label><DatePicker format="yyyy/MM/dd" type="daterange" placement="right-start" placeholder="登记时间" style="width: 176px" size="small"></DatePicker>
      </div>
      <div v-if="moreSelect">
        <label>经纪人:</label><div style="display:inline-block" class="inpt">
          <Input placeholder="持盘者的姓名和电话" style="width: 126px;" size="small"/><Input placeholder="共享者的姓名和电话" style="width: 126px;" size="small"/><Input placeholder="创建者的姓名和电话" style="width: 126px;" size="small"/>
        </div>
        <label>客户居住区域:</label><div style="display:inline-block" class="inpt">
          <Input placeholder="客户居住区域" style="width: 126px;" size="small"/>
        </div>
      </div>
      <div v-if="moreSelect">
        <label>籍贯:</label><div style="display:inline-block" class="inpt">
          <Input placeholder="籍贯" style="width: 126px;" size="small"/>
        </div>
        <label>已成交客户居住区域:</label><div style="display:inline-block" class="inpt">
          <Input placeholder="已成交客户居住区域" style="width: 126px;" size="small"/>
        </div>
      </div>

      <div>
        <label></label><Button type="primary" icon="ios-search" size="small">搜索</Button>
        <button type="button" class="ivu-btn ivu-btn-small" @click="showMoreSelect"><i class="ivu-icon" :class="moreSelect?'ivu-icon-minus-round':'ivu-icon-plus-round'"></i> <span>{{moreSelect?"收起":"更多"}}</span></button>
      </div>
    </form>

		<Table :data="tableData1" :columns="tableColumns1" stripe @on-sort-change="changePagebySort" @on-row-dblclick="showItems"></Table>
		<div style="margin: 10px;overflow: hidden">
			<div style="float: right;">
				<Page :total="100" :current="1" @on-change="changePage"></Page>
			</div>
		</div>
	</div>
</template>
<script>
  import switchArea from './components/switchArea.vue';
	export default {
    components: {
      switchArea
    },
		data() {
			return {
				tableData1: this.mockTableData1(),
				tableColumns1: [{
						title: 'Name',
						key: 'name'
					},
					{
						title: 'Status',
						key: 'status',
						sortable: true,
						render: (h, params) => {
							const row = params.row;
							const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
							const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';

							return h('Tag', {
								props: {
									type: 'dot',
									color: color
								}
							}, text);
						}
					},
					{
						title: 'Portrayal',
						key: 'portrayal',
						render: (h, params) => {
							return h('Poptip', {
								props: {
									trigger: 'hover',
									title: params.row.portrayal.length + 'portrayals',
									placement: 'bottom'
								}
							}, [
								h('Tag', params.row.portrayal.length),
								h('div', {
									slot: 'content'
								}, [
									h('ul', this.tableData1[params.index].portrayal.map(item => {
										return h('li', {
											style: {
												textAlign: 'center',
												padding: '4px'
											}
										}, item)
									}))
								])
							]);
						}
					},
					{
						title: 'People',
						key: 'people',
						render: (h, params) => {
							return h('Poptip', {
								props: {
									trigger: 'hover',
									title: params.row.people.length + 'customers',
									placement: 'bottom'
								}
							}, [
								h('Tag', params.row.people.length),
								h('div', {
									slot: 'content'
								}, [
									h('ul', this.tableData1[params.index].people.map(item => {
										return h('li', {
											style: {
												textAlign: 'center',
												padding: '4px'
											}
										}, item.n + '：' + item.c + 'People')
									}))
								])
							]);
						}
					},
					{
						title: 'Sampling Time',
						key: 'time',
						render: (h, params) => {
							return h('div', 'Almost' + params.row.time + 'days');
						}
					},
					{
						title: 'Updated Time',
						key: 'update',
						render: (h, params) => {
							return h('div', this.formatDate(this.tableData1[params.index].update));
						}
					}
				],
        moreSelect:false,
			}
		},
		methods: {
			mockTableData1() {
				let data = [];
				for(let i = 0; i < 10; i++) {
					data.push({
            id: "id_"+Math.floor(Math.random() * 100 + 1),
						name: 'Business' + Math.floor(Math.random() * 100 + 1),
						status: Math.floor(Math.random() * 3 + 1),
						portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
						people: [{
								n: 'People' + Math.floor(Math.random() * 100 + 1),
								c: Math.floor(Math.random() * 1000000 + 100000)
							},
							{
								n: 'People' + Math.floor(Math.random() * 100 + 1),
								c: Math.floor(Math.random() * 1000000 + 100000)
							},
							{
								n: 'People' + Math.floor(Math.random() * 100 + 1),
								c: Math.floor(Math.random() * 1000000 + 100000)
							}
						],
						time: Math.floor(Math.random() * 7 + 1),
						update: new Date()
					})
				}
				return data;
			},
			formatDate(date) {
				const y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? '0' + m : m;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + m + '-' + d;
			},
			changePage() {
				console.info(this.tableData1);
				// The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
				this.tableData1 = this.mockTableData1();
			},
      changePagebySort(column,key,order){
        console.info(column,key,order);
        this.changePage();
      },
			showItems(index) {
				console.info(index);
        let query = {shopping_id: index.id};
        this.$router.push({
          name: 'order_info',
          params: query
        });
			},
      showMoreSelect(){
        this.moreSelect = !this.moreSelect;
      }
		}
	}
</script>

<style>
.listsort-wrap{
  padding: 10px;background: #fff;border: 1px solid #ddd;margin-bottom: 10px
}
.listsort-wrap label{
  display: inline-block;margin-right: 5px;display: inline-block;min-width: 60px;
}
.listsort-wrap>div{padding-bottom: 7px;}
.inpt{margin-right:10px;}
.inpt .ivu-input{
    border-radius: 0;
  }
.inpt .ivu-input-wrapper{
  width:46px;
  margin-left: -1px;
}
.ivu-input{
  border-radius: 0;
}
</style>
